<template>
  <div class="contain">
    <div class="top">
      <div>未达标企业</div>
      <div>
            <el-menu active-text-color="#409EFF" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1">今天</el-menu-item>
                <el-menu-item index="7">7天</el-menu-item>
                <el-menu-item index="14">14天</el-menu-item>
                <el-menu-item index="30">30天</el-menu-item>
            </el-menu>
            <div>
                <el-date-picker
                    v-model="valueDate"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
    </div>
    <div class="content">
      <div class="content-top">
        <div>安排表</div>
        <div>
          <div>
            <el-button size="mini">一键智能排程</el-button>
            <el-button size="mini">确定</el-button>
          </div>
        </div>
      </div>
      <div class="content-content">
        <div class="content-content-top">
          <div>未达标企业</div>
          <div>
            <el-select v-model="selectValue" placeholder="请选择企业">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div>
            企业日基线：<span style="color:red">{{bussData.baseLine}}</span>
            剩余额度：<span style="color:red">{{bussData.surplus}}</span> 
          </div>
        </div>
        <div class="content-content-footer">
          <div class="content-left">
            <div>日期</div>
            <div>认领缺口额度</div>
            <div>日期</div>
            <div>认领缺口额度</div>
          </div>
          <div class="content-right">
            <div v-for="item in bussData.dataTime" :key="item.index">
              <div>{{item.week}}</div>
              <div v-if="item.surplusInput1!=''">{{item.surplusInput}}</div>
              <div v-else id="inputName">
                <el-input id="el-input-table"
                  size="mini"
                  placeholder="输入额度"
                  type="number"
                  v-model="item.surplusInput"
                  @change="handInput(item)">
                </el-input>
                <el-select v-model="item.surplusSelect"
                filterable placeholder="请选择" 
                id="el-select-table" allow-create 
                 size="mini" @change="handSelect(item)">
                  <el-option
                    v-for="item in SelectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      valueDate:'',
      options:[{
                value:"企业1",
                label:"企业1"
            },
            {
                value:"企业2",
                label:"企业2"
      }],
      SelectOptions: [{
                value: '5%',
                label: '5%'
                }, {
                value: '10%',
                label: '10%'
                }, {
                value: '15%',
                label: '15%'
          }],
      selectValue:'',
      bussData:{
        baseLine:500,
        surplus:2000,
        amount:2000,
        dataTime:[
          {
            index:0,
            surplusInput1:'',
            surplusInput:'',
            surplusSelect:'',
            week:"周一(2022年09月10日)"
          },
          {
            index:1,
            surplusInput1:120,
            surplusInput:120,
            surplusSelect:'',
            week:"周二(2022年09月11日)"
          },
          {
            index:2,
            surplusInput1:'',
            surplusInput:'',
            surplusSelect:'',
            week:"周三(2022年09月12日)"
          },
          {
            index:3,
            surplusInput1:300,
            surplusInput:300,
            surplusSelect:'',
            week:"周四(2022年09月13日)"
          },
          {
            index:4,
            surplusInput1:'',
            surplusInput:'',
            surplusSelect:'',
            week:"周五(2022年09月14日)"
          },
          {
            index:5,
            surplusInput1:'',
            surplusInput:'',
            surplusSelect:'',
            week:"周六(2022年09月15日)"
          },
          {
            index:6,
            surplusInput1:'',
            surplusInput:'',
            surplusSelect:'',
            week:"周日(2022年09月16日)"
          }
        ]
      }
    }
  },
  methods: {
    handInput(item) {
            //当为空时，返回并且百分比设置为空
            if(item.inputSurplus == ''){
                item.selectSurplus = ''
                console.log(this.surplusItem)
                return
            }
            this.computeFunds();
            //计算百分比
            item.surplusSelect = (parseInt(item.surplusInput)*100/this.bussData.baseLine).toFixed(0) + '%'
      },
      handSelect(item){
            //当选择器为空，输入框也为空
            if(item.surplusSelect == ''){
                item.surplusSelect = ''
                return
            }
            //计算输入值
            if(item.surplusSelect[item.surplusSelect.length-1]!= '%'){return}
            let per = parseInt(item.surplusSelect.split('%'))
            item.surplusInput = per*this.bussData.baseLine/100
            this.computeFunds();
        },
    computeFunds(){
      let amount = this.bussData.amount;
      for(let i = 0;i < 7;i++){
        if(this.bussData.dataTime[i].surplusInput1==''){
          amount -= this.bussData.dataTime[i].surplusInput
        }
      }
      this.bussData.surplus = amount
    }
  },
}
</script>

<style scoped>
#inputName{
  display: flex;
}
./deep/#el-input-table::-webkit-input-placeholder{
  font-size: 0.1px; 
}
/deep/#el-input-table{
  
  width: 60%;
}
/deep/#el-select-table{
  width: 100%;
}
.contain{
  margin: 10px;
  border: 1px solid #EBEEF5;
}
.top{
  width: 100%;
  height: 61px;
  display: flex;
}
.top>div{
  width: 50%;
  height: 61px;
  line-height: 61px;
}
.top>div:first-child{
  padding-left: 10px;
}
.top>div:last-child{
  display: flex;
}
.top>div:last-child>div:last-child{
  padding-left: 20px;
}
.content-top{
  width: 100%;
  height: 40px;
  margin-top: 20px;
}
.content-top>div{
  width: 49%;
  height: 40px;
  float: left;
}
.content-top>div:first-child{
  padding-left: 10px;
}
.content-top>div:last-child>div{
  float: right;
}
.content-content{
  width: 100%;
}
.content-content-top{
  width: 100%;
  height: 40px;
  display: flex;
}
.content-content-top>div{
  width: 30%;
  line-height: 40px;
}
.content-content-top>div:first-child{
  padding-left: 10px;
}
.content-content-top>div:last-child{
  text-align: right;
}
.content-left{
  width: 20%;
  height: 200px;

}
.content-left>div{
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-weight: 40px;
  font-size: large;
}
.content-left>div:first-child,.content-left>div:nth-child(3){
  background-color: #EBEEF5;
}
.content-right{
  width: 80%;
  height: 200px;
}
.content-right>div{
  float: left;
  width: 25%;
  height: 100px;
  text-align: center;
}
.content-right>div>div:first-child{
  background-color: #EBEEF5;
  line-height: 50px;
}
.content-right>div>div:last-child{
  line-height: 50px;
}
.content-content-footer{
  display: flex;
  margin-top: 10px;
}
/deep/input::-webkit-outer-spin-button,
/deep/input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
</style>